<script>
import axios from "axios";
import instance from "@/axios/axios";

export default {
  name: "axiosPage",
  data(){
    return{
      pickList:[],
      courseFreelist:[],
      boutiqueList:[],
      discountList:[],
    }
  },
  methods:{
    getCourseList(type){
      return instance.post('/weChat/applet/course/list/type',{
        type,
        pageNum:1,
        pageSize:5,
      })
    }
  },
  created(){
    //axios.get('地址')
    //地址:协议+主机+端口+路径+参数+(?拼接 &参数1=参数1的值)
    console.log(axios.get('https://showme2.myhope365.com/online_course/weChat/applet/course/banner/list?number=5'))
    axios.get('https://showme2.myhope365.com/online_course/weChat/applet/course/banner/list?number=5').then(res=>{//promise对象
      console.log(res,'res');
      this.pickList=res.data.data;
    }).catch(err=>{//失败的时候
      console.log(err);
    }).finally(com=>{
      console.log(com);
    });
    this.getCourseList('free').then(res=>{
      console.log(res,'免费课程');
      if (res.code===0){
        console.log(res.rows)
        this.courseFreelist=res.rows;
      }
    });


    this.getCourseList('boutique').then(res=>{
      console.log(res,'精品课程');
      if (res.code===0){
        console.log(res.rows)
        this.boutiqueList=res.rows;
      }
    });


    this.getCourseList('discount').then(res=>{
      console.log(res,'精品课程');
      if (res.code===0){
        console.log(res.rows)
        this.discountList=res.rows;
      }
    });


    axios.post('https://showme2.myhope365.com/online_course/weChat/applet/subject/list',{
      enable:1,
    }).then(res=>{
      console.log(res);
    })
    console.log(instance);
  }
}
</script>

<template>
<div>
  axios
  <div>
    <img class="pic" :src="item.imgUrl" alt="" v-for="item in pickList" :key="item.id"/>
    <h1>免费课程</h1>
    <div class="free">
      <div class="free-item" v-for="item in courseFreelist" :key="item.courseId">
        <img :src="item.bannerFileUrl" alt="">
        <p>{{item.courseTitle}}</p>
        <p>免费</p>
      </div>
    </div>
    <h1>精品课程</h1>
    <div class="free">
      <div class="free-item" v-for="item in boutiqueList" :key="item.courseId">
        <img :src="item.bannerFileUrl" alt="">
        <p>{{item.courseTitle}}</p>
        <p v-if="item.isFree==='1'">免费</p>
        <p v-else-if="item.isDiscount==='1'">{{item.discountPrice}}<del>{{ item.coursePrice }}</del></p>
        <p v-else>{{item.coursePrice}}</p>
      </div>
    </div>
    <h1>折扣课程</h1>
    <div class="free">
      <div class="free-item" v-for="item in discountList" :key="item.courseId">
        <img :src="item.bannerFileUrl" alt="">
        <p>{{item.courseTitle}}</p>
        <p >{{item.discountPrice}}<del>{{ item.coursePrice }}</del></p>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="less">
.pic {
  width: 200px;
}
.free {
  display: flex;
  width: 1200px;
  justify-content: space-around;
  &-item {
    width: 18%;
    img {
      width: 100%;
    }
  }
}
</style>